<template>
  <div class="add">
    <van-nav-bar title="地址编辑" left-text="返回" left-arrow @click-left="onClickLeft" fixed/>
    <div class="list">
      <van-form @submit="onSubmit">
        <van-field v-model="contacts" label="联系人" placeholder="联系人"/>

        <van-field v-model="contactsPhone" label="电话" placeholder="联系人电话"/>

        <van-field v-model="address" label="详细地址" placeholder="联系人详细地址"/>

        <van-radio-group v-model="isDefault" direction="horizontal" class="dan" @change="setDefault">
          <van-radio name="0">默认地址</van-radio>
          <van-radio name="1">非默认地址</van-radio>
        </van-radio-group>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
        <div style="margin: 16px;">
          <van-button round block type="danger" @click="del">删除</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
  export default {
    mounted: function () {
      this.$nextTick(() => {
        (this.contacts = this.$route.params.name),
          (this.contactsPhone = this.$route.params.tel),
          (this.address = this.$route.params.address),
          (this.isDefault = this.$route.params.isDefault);
      });
    },
    data() {
      return {
        list: [],
        contacts: this.$route.params.name,
        contactsPhone: this.$route.params.tel,
        address: this.$route.params.address,
        isDefault: this.$route.params.isDefault,
        id: this.$route.params.id
      };
    },
    methods: {
      onSubmit() {
        let paramForm = {
          id: this.id,
          contacts: this.contacts,
          contactsPhone: this.contactsPhone,
          address: this.address,
          isDefault: this.isDefault
        };
        this.$axios.put("prod-api/app/address/update", paramForm).then(res => {
          if (200 == res.data.code) {
            this.$router.go(-1);
            this.$toast.success("操作成功");
          } else {
            this.$toast.fail(res.data.msg);
          }
        });
      },
      setDefault() {
        let paramForm = {
          id: this.id
        };
        this.$axios.put("prod-api/app/address/default/" + paramForm.id).then(res => {
          if (200 == res.data.code) {
            this.$toast.success("操作成功");
          } else {
            this.$toast.fail(res.data.msg);
          }
        });
      },
      del() {
        let paramForm = {
          id: this.id
        };
        this.$axios
          .delete("prod-api/app/address/delete/" + paramForm.id)
          .then(res => {
            if (200 == res.data.code) {
              this.$toast.success("操作成功");
            } else {
              this.$toast.fail(res.data.msg);
            }
          });
      },
      onClickLeft() {
        this.$router.go(-1);
      }
    },
    mounted() {
    }
  };
</script>
<style lang="scss" scoped>
  .van-nav-bar {
    background: url("../assets/bg2.png");
  }

  .dan {
    margin-top: 15px;
    margin-left: 20%;
    margin-bottom: 65px;
  }

  .van-button__text {
    //background-color: dodgerblue;
    border: 0;
  }

  .list {
    margin-top: 50px;
  }

  .van-button::before {
    background-color: blue;
  }

  /prop/ .van-button[data-v-51ee50a4]::before {
    background-color: red;
  }
</style>
